<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人资料 - 中山大学刷题平台</title>
    <!-- 外部CDN资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'sysu-main-green': '#045525',
                        'sysu-lightGreen': '#E8F3FF',
                        'sysu-blue': '#165DFF',
                        'sysu-darkBlue': '#0E42D2',
                        'sysu-gray': '#F7F8FA',
                        'sysu-yellow': '#FAAD14',
                        'sysu-red': '#FF4D4F',
                        'easy': '#52C41A',
                        'medium': '#FAAD14',
                        'hard': '#FF4D4F'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 20px rgba(0, 0, 0, 0.05)',
                        'card-hover': '0 8px 30px rgba(0, 0, 0, 0.1)',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .stat-card {
                @apply bg-white rounded-xl shadow-card p-6 transition-all duration-300 hover:shadow-card-hover;
            }
            .data-card {
                @apply stat-card flex flex-col items-center justify-center text-center;
            }
            .resource-card {
                @apply stat-card flex flex-col items-center justify-center cursor-pointer hover:-translate-y-1;
            }
            .input-field {
                @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-sysu-main-green/20 focus:border-sysu-main-green transition-colors;
            }
            .btn-primary {
                @apply bg-sysu-main-green text-white py-2 px-6 rounded-lg hover:bg-sysu-main-green/90 transition-colors font-medium;
            }
            .btn-outline {
                @apply border border-sysu-main-green text-sysu-main-green py-2 px-6 rounded-lg hover:bg-sysu-main-green hover:text-white transition-colors font-medium;
            }
            /* 淡入动画基础类 */
            .fade-in {
                opacity: 0;
                transform: translateY(15px);
                transition: opacity 0.6s ease-out, transform 0.6s ease-out;
            }
            .fade-in.visible {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans opacity-0 transition-opacity 0.8s ease-out" id="page-body">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white border-b border-gray-200 shadow-sm transition-all duration-300 fade-in">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <!-- 校徽+平台名称 -->
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-sysu-main-green text-white rounded-lg flex items-center justify-center mr-3 shadow-sm">
                        <i class="fa fa-graduation-cap text-xl"></i>
                    </div>
                    <h1 class="text-lg font-bold text-sysu-main-green">中山大学刷题平台</h1>
                </div>

                <!-- 核心导航（桌面端） -->
                <nav class="hidden md:flex space-x-6">
                    <a href="/" class="text-gray-600 hover:text-sysu-main-green py-5 transition-colors relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 hover:after:w-full after:bg-sysu-main-green after:transition-all after:duration-300">首页</a>
                    <a href="/questions" class="text-gray-600 hover:text-sysu-main-green py-5 transition-colors relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 hover:after:w-full after:bg-sysu-main-green after:transition-all after:duration-300">题库</a>
                    <a href="/contests" class="text-gray-600 hover:text-sysu-main-green py-5 transition-colors relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 hover:after:w-full after:bg-sysu-main-green after:transition-all after:duration-300">竞赛</a>
                    <a href="/ranking" class="text-gray-600 hover:text-sysu-main-green py-5 transition-colors relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 hover:after:w-full after:bg-sysu-main-green after:transition-all after:duration-300">排行榜</a>
                    <a href="/resources" class="text-gray-600 hover:text-sysu-main-green py-5 transition-colors relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 hover:after:w-full after:bg-sysu-main-green after:transition-all after:duration-300">学习资源</a>
                </nav>

                <!-- 用户功能区 -->
                <div class="flex items-center space-x-4">
                    <!-- 搜索框 -->
                    <div class="hidden lg:flex items-center relative">
                        <input type="text" placeholder="搜索题目/资源"
                               class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:border-sysu-main-green focus:outline-none focus:ring-2 focus:ring-sysu-main-green/20 w-48 text-sm">
                        <i class="fa fa-search absolute left-3 text-gray-400"></i>
                    </div>

                    <!-- 用户头像 -->
                     <!-- 用户区域容器（初始为空，由JS动态填充） -->
                    <div class="flex items-center space-x-4" id="user-area-container">
                        <!-- 加载状态 -->
                        <div class="flex items-center" id="loading-indicator">
                            <div class="w-6 h-6 border-2 border-gray-300 border-t-sysu-blue rounded-full animate-spin"></div>
                        </div>
                    </div>

                    <script>
                    // 页面加载完成后检查登录状态
                    document.addEventListener('DOMContentLoaded', function() {
                        checkLoginStatus();
                        initSmoothEffects();
                    });

                    // 检查登录状态的AJAX请求
                    async function checkLoginStatus() {
                        const container = document.getElementById('user-area-container');
                        const loadingIndicator = document.getElementById('loading-indicator');

                        try {
                            const token = localStorage.getItem('token');
                            // 发送请求到后端验证接口
                            const response = await fetch('/api/check_login', {
                                method: 'GET',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'Authorization': 'Bearer ' + token
                                }
                            });

                            if (!response.ok) {
                                throw new Error('验证请求失败');
                            }

                            const data = await response.json();

                            // 根据返回的登录状态渲染不同内容
                            if (data.is_logged_in) {
                                console.log(data.avatar);
                                renderLoggedInView(container, data || {});
                            } else {
                                renderLoggedOutView(container);
                            }
                        } catch (error) {
                            console.error('登录状态验证出错:', error);
                            // 出错时默认显示登录/注册按钮
                            renderLoggedOutView(container);
                        } finally {
                            // 隐藏加载指示器
                            if (loadingIndicator) {
                                loadingIndicator.remove();
                            }
                        }
                    }

                    // 渲染已登录视图
                    function renderLoggedInView(container, userData) {
                        container.innerHTML = `
                            <div class="relative" id="userDropdown">
                                <button class="flex items-center space-x-2 focus:outline-none cursor-pointer" id="dropdownTrigger">
                                    <img src="${'http://localhost:5000/api/v1/avatar/' + userData.user_id || 'https://picsum.photos/id/1005/40/40'}"
                                         alt="${userData.username || '用户头像'}"
                                         class="w-8 h-8 rounded-full border-2 border-transparent hover:border-sysu-blue transition-colors">
                                    <i class="fa fa-angle-down text-gray-500 hidden sm:block transition-transform duration-300" id="dropdownIcon"></i>
                                </button>
                                <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 hidden z-50" id="dropdownMenu">
                                    <a href="/profile/${ userData.user_id }" class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightBlue hover:text-sysu-blue transition-colors">个人中心</a>
                                    <a href="/my_progress/${ userData.user_id }" class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightBlue hover:text-sysu-blue transition-colors">学习进度</a>
                                    <a class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightBlue hover:text-sysu-blue transition-colors" onclick="logout()">退出登录</a>
                                </div>
                            </div>
                        `;

                        // 绑定下拉菜单事件
                        bindDropdownEvents();
                    }

                    // 退出登录
                    function logout() {
                        try {
                            const token = localStorage.getItem('token');
                            // 发送退出登录请求到后端
                            fetch('/api/v1/logout', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'Authorization': 'Bearer ' + token
                                }
                            }).then(() => {
                                // 清除本地存储中的token
                                localStorage.removeItem('token');
                                // 刷新页面或跳转到登录页
                                window.location.href = '/';
                            });
                        }
                        catch (error) {
                            console.error('退出登录出错:', error);
                        }
                    }

                    // 渲染未登录视图
                    function renderLoggedOutView(container) {
                        container.innerHTML = `
                            <div class="flex items-center space-x-3">
                                <a href="/login" class="text-gray-600 hover:text-sysu-blue transition-colors px-3 py-2 rounded-md text-sm font-medium">
                                    登录
                                </a>
                                <a href="/register" class="bg-sysu-blue text-white hover:bg-sysu-blue/90 transition-colors px-3 py-2 rounded-md text-sm font-medium">
                                    注册
                                </a>
                            </div>
                        `;
                    }

                    // 绑定下拉菜单交互事件
                    function bindDropdownEvents() {
                        const dropdownTrigger = document.getElementById('dropdownTrigger');
                        const dropdownMenu = document.getElementById('dropdownMenu');
                        const dropdownIcon = document.getElementById('dropdownIcon');
                        const userDropdown = document.getElementById('userDropdown');

                        if (!dropdownTrigger || !dropdownMenu || !dropdownIcon) return;

                        // 点击头像按钮切换下拉菜单显示状态
                        dropdownTrigger.addEventListener('click', (e) => {
                            e.stopPropagation();
                            dropdownMenu.classList.toggle('hidden');
                            dropdownIcon.classList.toggle('rotate-180');
                        });

                        // 点击页面其他区域关闭下拉菜单
                        document.addEventListener('click', () => {
                            if (!dropdownMenu.classList.contains('hidden')) {
                                dropdownMenu.classList.add('hidden');
                                dropdownIcon.classList.remove('rotate-180');
                            }
                        });

                        // 点击下拉菜单内部不关闭
                        dropdownMenu.addEventListener('click', (e) => {
                            e.stopPropagation();
                        });

                        // 鼠标离开整个下拉区域时关闭
                        userDropdown.addEventListener('mouseleave', () => {
                            setTimeout(() => {
                                if (!dropdownMenu.matches(':hover') && !dropdownTrigger.matches(':hover')) {
                                    dropdownMenu.classList.add('hidden');
                                    dropdownIcon.classList.remove('rotate-180');
                                }
                            }, 300);
                        });
                    }

                    // 初始化平滑效果
                    function initSmoothEffects() {
                        // 导航栏显示动画
                        setTimeout(() => {
                            document.getElementById('navbar').classList.add('visible');
                        }, 100);

                        // 移动端菜单按钮事件
                        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
                        const mobileMenu = document.getElementById('mobile-menu');

                        if (mobileMenuBtn && mobileMenu) {
                            mobileMenuBtn.addEventListener('click', () => {
                                mobileMenu.classList.toggle('hidden');
                                // 添加菜单切换动画
                                if (!mobileMenu.classList.contains('hidden')) {
                                    mobileMenu.style.maxHeight = '0';
                                    mobileMenu.style.overflow = 'hidden';
                                    mobileMenu.style.transition = 'max-height 0.3s ease-out';
                                    setTimeout(() => {
                                        mobileMenu.style.maxHeight = mobileMenu.scrollHeight + 'px';
                                    }, 10);
                                } else {
                                    mobileMenu.style.maxHeight = '0';
                                }
                            });
                        }

                        // 设置滚动显示动画
                        setupScrollAnimation();
                    }

                    // 设置滚动显示动画
                    function setupScrollAnimation() {
                        const fadeElements = document.querySelectorAll('.fade-in');

                        // 初始检查可见元素
                        checkFadeElements(fadeElements);

                        // 滚动时检查可见元素
                        window.addEventListener('scroll', () => {
                            checkFadeElements(fadeElements);
                        });
                    }

                    // 检查并显示进入视口的元素
                    function checkFadeElements(elements) {
                        elements.forEach((element, index) => {
                            const rect = element.getBoundingClientRect();
                            const windowHeight = window.innerHeight || document.documentElement.clientHeight;

                            // 元素进入视口
                            if (!element.classList.contains('visible')) {
                                // 依次显示，添加延迟效果
                                setTimeout(() => {
                                    element.classList.add('visible');
                                }, index * 200);
                            }
                        });
                    }
                    </script>
                </div>
            </div>
        </div>
    </header>

    <main class="container mx-auto px-4 py-8">
        <!-- 页面标题 -->
        <div class="mb-8 fade-in">
            <h1 class="text-2xl md:text-3xl font-bold text-gray-800">个人资料</h1>
            <p class="text-gray-500 mt-1">管理您的个人信息、学习数据和资源</p>
        </div>

        <!-- 个人资料编辑区域 -->
        <section class="mb-10">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- 左侧：头像和基本信息 -->
                <div class="lg:col-span-1 fade-in">
                    <div class="stat-card h-full">
                        <!-- 头像上传区域 -->
                        <div class="flex flex-col items-center mb-6">
                            <div class="relative mb-4 group">
                                <img id="avatarPreview" src="{{ user.avatar or 'https://picsum.photos/id/1005/120/120' }}" alt="用户头像" class="w-32 h-32 rounded-full object-cover border-4 border-sysu-lightBlue transition-all duration-300 group-hover:border-sysu-main-green">
                                <label for="avatarUpload" class="absolute bottom-0 right-0 w-10 h-10 bg-sysu-main-green text-white rounded-full flex items-center justify-center cursor-pointer hover:bg-sysu-main-green/90 transition-colors shadow-md">
                                    <i class="fa fa-camera"></i>
                                </label>
                                <input type="file" id="avatarUpload" accept="image/*" class="hidden">
                            </div>
                            <h3 class="text-xl font-bold text-gray-800 mb-1">{{ user.username or '张三' }}</h3>
                            <p class="text-sm text-gray-500 mb-2">{% if user.college %}{{ user.college }} · {{ user.major }}{% else %}未完善个人信息{% endif %}</p>
                            <span class="px-3 py-1 bg-sysu-lightGreen text-sysu-main-green rounded-full text-xs font-medium">
                                注册时间: {{ user.create_time.strftime('%Y-%m-%d') if user.create_time else '2022-09-01' }}
                            </span>
                        </div>

                        <!-- 基本信息卡片 -->
                        <div class="space-y-4 pt-4 border-t border-gray-100">
                            <div class="flex items-center">
                                <div class="w-8 h-8 bg-sysu-lightGreen text-sysu-main-green rounded-lg flex items-center justify-center mr-3">
                                    <i class="fa fa-id-card"></i>
                                </div>
                                <div>
                                    <h3 class="text-sm font-medium text-gray-500">用户ID</h3>
                                    <p class="text-gray-800">#{{ user.id }}</p>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <div class="w-8 h-8 bg-sysu-lightGreen text-sysu-main-green rounded-lg flex items-center justify-center mr-3">
                                    <i class="fa fa-envelope"></i>
                                </div>
                                <div>
                                    <h3 class="text-sm font-medium text-gray-500">电子邮箱</h3>
                                    <p class="text-gray-800">{{ user.email or '未绑定邮箱' }}</p>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <div class="w-8 h-8 bg-sysu-lightGreen text-sysu-main-green rounded-lg flex items-center justify-center mr-3">
                                    <i class="fa fa-mobile"></i>
                                </div>
                                <div>
                                    <h3 class="text-sm font-medium text-gray-500">手机号码</h3>
                                    <p class="text-gray-800">{% if user.phone %}{{ user.phone }}{% else %}未绑定手机{% endif %}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右侧：详细信息编辑 -->
                <div class="lg:col-span-2 fade-in">
                    <div class="stat-card h-full">
                        <h2 class="text-xl font-bold mb-6 flex items-center">
                            <i class="fa fa-pencil-square-o text-sysu-main-green mr-2"></i>
                            编辑个人信息
                        </h2>

                        <form id="profileForm" class="space-y-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名 <span class="text-sysu-red">*</span></label>
                                    <input type="text" id="username" class="input-field" value="{{ user.username or '张三' }}" required>
                                </div>
                                <div>
                                    <label for="student_id" class="block text-sm font-medium text-gray-700 mb-1">学号</label>
                                    <input type="text" id="student_id" class="input-field" value="{{ user.student_id or '' }}">
                                </div>
                            </div>

                            <div>
                                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">电子邮箱 <span class="text-sysu-red">*</span></label>
                                <input type="email" id="email" class="input-field" value="{{ user.email or 'example@mail.sysu.edu.cn' }}" required>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="college" class="block text-sm font-medium text-gray-700 mb-1">学院</label>
                                    <input type="text" id="college" class="input-field" value="{{ user.college or '数据科学与计算机学院' }}">
                                </div>
                                <div>
                                    <label for="major" class="block text-sm font-medium text-gray-700 mb-1">专业</label>
                                    <input type="text" id="major" class="input-field" value="{{ user.major or '计算机科学与技术' }}">
                                </div>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="grade" class="block text-sm font-medium text-gray-700 mb-1">年级</label>
                                    <input type="text" id="grade" class="input-field" value="{{ user.grade or '2021级' }}">
                                </div>
                                <div>
                                    <label for="location" class="block text-sm font-medium text-gray-700 mb-1">所在地</label>
                                    <input type="text" id="location" class="input-field" value="{{ user.location or '广东 广州' }}">
                                </div>
                            </div>

                            <div>
                                <label for="blog" class="block text-sm font-medium text-gray-700 mb-1">个人博客/网站</label>
                                <input type="url" id="blog" class="input-field" value="{{ user.blog or '' }}" placeholder="https://">
                            </div>

                            <div>
                                <label for="bio" class="block text-sm font-medium text-gray-700 mb-1">个人简介</label>
                                <textarea id="bio" rows="4" class="input-field" placeholder="简单介绍一下自己吧...">{{ user.bio or '算法爱好者，热衷于解决各种编程难题，希望能和大家一起交流学习！' }}</textarea>
                            </div>

                            <div class="flex justify-end space-x-4 pt-4 border-t border-gray-200">
                                <button type="button" id="cancelBtn" class="btn-outline">取消</button>
                                <button type="submit" class="btn-primary">
                                    <i class="fa fa-save mr-2"></i>保存修改
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>

        <!-- 学习数据统计卡片 -->
        <section class="mb-10 fade-in">
            <h2 class="text-xl font-bold mb-6 flex items-center">
                <i class="fa fa-bar-chart text-sysu-main-green mr-2"></i>
                我的学习数据
            </h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- 刷题数据 -->
                <div class="data-card">
                    <div class="w-14 h-14 bg-sysu-lightGreen text-sysu-main-green rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-code text-2xl"></i>
                    </div>
                    <h3 class="text-3xl font-bold text-gray-800 mb-1">{{ user.solved_count or 42 }}</h3>
                    <p class="text-gray-500">已完成题目</p>
                    <div class="mt-3 w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-sysu-main-green h-2 rounded-full" style="width: {{ (user.solved_count or 42) / 1200 * 100 }}%"></div>
                    </div>
                    <p class="text-xs text-gray-500 mt-1">完成率 {{ "{:.1f}".format((user.solved_count or 42) / 1200 * 100) }}%</p>
                </div>

                <!-- 竞赛数据 -->
                <div class="data-card">
                    <div class="w-14 h-14 bg-sysu-blue/10 text-sysu-blue rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-trophy text-2xl"></i>
                    </div>
                    <h3 class="text-3xl font-bold text-gray-800 mb-1">{{ user.contest_count or 8 }}</h3>
                    <p class="text-gray-500">参与竞赛</p>
                    <div class="mt-3 flex items-center text-sm text-gray-500">
                        <span class="flex items-center mr-3">
                            <span class="w-2 h-2 bg-easy rounded-full mr-1"></span>
                            3次获奖
                        </span>
                        <span class="flex items-center">
                            <span class="w-2 h-2 bg-medium rounded-full mr-1"></span>
                            最高排名#12
                        </span>
                    </div>
                </div>

                <!-- 正确率数据 -->
                <div class="data-card">
                    <div class="w-14 h-14 bg-sysu-yellow/10 text-sysu-yellow rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-check-circle text-2xl"></i>
                    </div>
                    <h3 class="text-3xl font-bold text-gray-800 mb-1">{{ user.accuracy or 68 }}%</h3>
                    <p class="text-gray-500">平均正确率</p>
                    <div class="mt-3 flex items-center text-sm text-green-500">
                        <i class="fa fa-arrow-up mr-1"></i>
                        <span>较上月提升5%</span>
                    </div>
                </div>

                <!-- 连续刷题 -->
                <div class="data-card">
                    <div class="w-14 h-14 bg-sysu-red/10 text-sysu-red rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-fire text-2xl"></i>
                    </div>
                    <h3 class="text-3xl font-bold text-gray-800 mb-1">{{ user.streak_days or 21 }}</h3>
                    <p class="text-gray-500">连续刷题</p>
                    <div class="mt-3 flex items-center text-sm text-gray-500">
                        <span>历史最长: {{ user.max_streak or 45 }}天</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 个人资源卡片（收藏/笔记/题解） -->
        <section class="mb-10 fade-in">
            <h2 class="text-xl font-bold mb-6 flex items-center">
                <i class="fa fa-folder-open text-sysu-main-green mr-2"></i>
                我的学习资源
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- 收藏题目 -->
                <a href="/favorites/{{ user.id }}" class="resource-card">
                    <div class="w-14 h-14 bg-sysu-main-green/10 text-sysu-main-green rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-bookmark text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2">收藏题目</h3>
                    <p class="text-gray-500 mb-3">标记重点题目，方便后续复习</p>
                    <div class="flex items-center justify-center text-sysu-main-green font-medium">
                        <span>查看全部</span>
                        <i class="fa fa-angle-right ml-2"></i>
                    </div>
                    <div class="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-sysu-main-green to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                </a>

                <!-- 学习笔记 -->
                <a href="/notes/{{ user.id }}" class="resource-card">
                    <div class="w-14 h-14 bg-sysu-blue/10 text-sysu-blue rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-sticky-note text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2">学习笔记</h3>
                    <p class="text-gray-500 mb-3">记录解题思路和知识点总结</p>
                    <div class="flex items-center justify-center text-sysu-blue font-medium">
                        <span>查看全部</span>
                        <i class="fa fa-angle-right ml-2"></i>
                    </div>
                </a>

                <!-- 我的题解 -->
                <a href="/solutions/{{ user.id }}" class="resource-card">
                    <div class="w-14 h-14 bg-sysu-yellow/10 text-sysu-yellow rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-pencil text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2">我的题解</h3>
                    <p class="text-gray-500 mb-3">分享自己的解题方法和代码</p>
                    <div class="flex items-center justify-center text-sysu-yellow font-medium">
                        <span>查看全部</span>
                        <i class="fa fa-angle-right ml-2"></i>
                    </div>
                </a>

                <!-- 我的电子书 -->
                <a href="/ebooks/{{ user.id }}" class="resource-card">
                    <div class="w-14 h-14 bg-sysu-main-green/10 text-sysu-main-green rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-book text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2">我的电子书</h3>
                    <p class="text-gray-500 mb-3">分享自己的学习笔记和知识</p>
                    <div class="flex items-center justify-center text-sysu-main-green font-medium">
                        <span>查看全部</span>
                        <i class="fa fa-angle-right ml-2"></i>
                    </div>
                </a>

                <!-- 我的项目 -->
                <a href="/projects/{{ user.id }}" class="resource-card">
                    <div class="w-14 h-14 bg-sysu-main-green/10 text-sysu-main-green rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-product-hunt text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2">我的项目</h3>
                    <p class="text-gray-500 mb-3">分享自己的项目和代码</p>
                    <div class="flex items-center justify-center text-sysu-main-green font-medium">
                        <span>查看全部</span>
                        <i class="fa fa-angle-right ml-2"></i>
                    </div>
                </a>

                <!-- 我的课程 -->
                <a href="/courses/{{ user.id }}" class="resource-card">
                    <div class="w-14 h-14 bg-sysu-main-green/10 text-sysu-main-green rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-graduation-cap text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2">我的课程</h3>
                    <p class="text-gray-500 mb-3">分享自己的课程和学习内容</p>
                    <div class="flex items-center justify-center text-sysu-main-green font-medium">
                        <span>查看全部</span>
                        <i class="fa fa-angle-right ml-2"></i>
                    </div>
                </a>
            </div>
        </section>

        <!-- 账号安全设置 -->
        <section class="mb-8 fade-in">
            <div class="stat-card">
                <h2 class="text-xl font-bold mb-6 flex items-center">
                    <i class="fa fa-shield text-sysu-main-green mr-2"></i>
                    账号安全
                </h2>

                <div class="space-y-6">
                    <div class="flex flex-col md:flex-row md:items-center justify-between p-5 border border-gray-200 rounded-xl hover:shadow-sm transition-shadow">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-sysu-red/10 text-sysu-red rounded-lg flex items-center justify-center mr-4">
                                <i class="fa fa-lock text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-medium text-lg">修改密码</h3>
                                <p class="text-sm text-gray-500 mt-1">建议定期更换密码以保证账号安全</p>
                            </div>
                        </div>
                        <button id="changePwdBtn" class="mt-3 md:mt-0 btn-outline">
                            <i class="fa fa-refresh mr-2"></i>修改密码
                        </button>
                    </div>

                    <div class="flex flex-col md:flex-row md:items-center justify-between p-5 border border-gray-200 rounded-xl hover:shadow-sm transition-shadow">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-sysu-blue/10 text-sysu-blue rounded-lg flex items-center justify-center mr-4">
                                <i class="fa fa-mobile text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-medium text-lg">绑定手机</h3>
                                <p class="text-sm text-gray-500 mt-1">{% if user.phone %}已绑定: {{ user.phone }} {% else %}绑定手机以提高账号安全性{% endif %}</p>
                            </div>
                        </div>
                        <button id="bindPhoneBtn" class="mt-3 md:mt-0 btn-outline">
                            <i class="fa fa-mobile mr-2"></i>{% if user.phone %}更换手机{% else %}绑定手机{% endif %}
                        </button>
                    </div>

                    <div class="flex flex-col md:flex-row md:items-center justify-between p-5 border border-gray-200 rounded-xl hover:shadow-sm transition-shadow">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-sysu-yellow/10 text-sysu-yellow rounded-lg flex items-center justify-center mr-4">
                                <i class="fa fa-envelope text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-medium text-lg">邮箱验证</h3>
                                <p class="text-sm text-gray-500 mt-1">{% if user.email_verified %}已验证: {{ user.email }} {% else %}验证邮箱以解锁更多功能{% endif %}</p>
                            </div>
                        </div>
                        <button id="verifyEmailBtn" class="mt-3 md:mt-0 btn-outline">
                            <i class="fa fa-check-circle mr-2"></i>{% if user.email_verified %}重新验证{% else %}发送验证邮件{% endif %}
                        </button>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="bg-gray-800 text-white py-12 fade-in">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <div class="flex items-center justify-center md:justify-start">
                        <div class="w-10 h-10 bg-white text-sysu-main-green rounded-lg flex items-center justify-center mr-3">
                            <i class="fa fa-graduation-cap text-xl"></i>
                        </div>
                        <h2 class="text-lg font-bold">中山大学刷题平台</h2>
                    </div>
                    <p class="text-gray-400 text-sm mt-2 text-center md:text-left">提升编程能力，培养算法思维</p>
                </div>

                <div class="flex flex-wrap justify-center gap-x-8 gap-y-2 text-sm text-gray-400">
                    <a href="#" class="hover:text-white transition-colors">关于我们</a>
                    <a href="#" class="hover:text-white transition-colors">使用帮助</a>
                    <a href="#" class="hover:text-white transition-colors">联系我们</a>
                    <a href="#" class="hover:text-white transition-colors">隐私政策</a>
                </div>
            </div>

            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-sm text-gray-500">
                <p>© 2025 中山大学刷题平台. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- 密码修改模态框 -->
    <div id="pwdModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden fade-in">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-md p-6 transform transition-all">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-bold text-gray-800">修改密码</h3>
                <button id="closePwdModal" class="text-gray-400 hover:text-gray-600 transition-colors">
                    <i class="fa fa-times text-lg"></i>
                </button>
            </div>
            <form id="pwdForm" class="space-y-5">
                <div>
                    <label for="oldPwd" class="block text-sm font-medium text-gray-700 mb-1">当前密码 <span class="text-sysu-red">*</span></label>
                    <input type="password" id="oldPwd" class="input-field" required placeholder="请输入当前密码">
                </div>
                <div>
                    <label for="newPwd" class="block text-sm font-medium text-gray-700 mb-1">新密码 <span class="text-sysu-red">*</span></label>
                    <input type="password" id="newPwd" class="input-field" required placeholder="请输入新密码">
                    <p class="text-xs text-gray-500 mt-1">密码长度至少8位，包含字母和数字</p>
                </div>
                <div>
                    <label for="confirmPwd" class="block text-sm font-medium text-gray-700 mb-1">确认新密码 <span class="text-sysu-red">*</span></label>
                    <input type="password" id="confirmPwd" class="input-field" required placeholder="请再次输入新密码">
                </div>
                <div class="pt-4 flex justify-end">
                    <button type="submit" class="btn-primary">
                        <i class="fa fa-save mr-2"></i>确认修改
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // 页面加载完成后触发淡入动画
        document.addEventListener('DOMContentLoaded', function() {
            // 页面整体淡入
            const pageBody = document.getElementById('page-body');
            setTimeout(() => {
                pageBody.style.opacity = '1';
            }, 100);

            // 页面内元素渐进式淡入
            const fadeElements = document.querySelectorAll('.fade-in');
            fadeElements.forEach((el, index) => {
                setTimeout(() => {
                    el.classList.add('visible');
                }, 150 + (index * 60)); // 按顺序延迟，营造层次感
            });

            // 下拉菜单初始显示（如果需要）
            const dropdownMenu = document.getElementById('dropdownMenu');
            if (dropdownMenu) dropdownMenu.classList.add('visible');
        });

        // 头像上传预览
        const avatarUpload = document.getElementById('avatarUpload');
        const avatarPreview = document.getElementById('avatarPreview');
        avatarUpload.addEventListener('change', function(e) {
            if (e.target.files && e.target.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    avatarPreview.src = e.target.result;
                    // 头像更换动画
                    avatarPreview.classList.add('scale-110');
                    setTimeout(() => avatarPreview.classList.remove('scale-110'), 300);
                }
                reader.readAsDataURL(e.target.files[0]);
            }
        });

        // 表单提交处理
        const profileForm = document.getElementById('profileForm');
        profileForm.addEventListener('submit', function(e) {
            e.preventDefault();
            // 模拟表单提交加载状态
            const submitBtn = this.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>保存中...';

            // 模拟接口请求延迟
            setTimeout(() => {
                alert('个人信息保存成功！');
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            }, 1500);
        });

        // 取消按钮
        document.getElementById('cancelBtn').addEventListener('click', function() {
            if (confirm('确定要取消修改吗？未保存的内容将会丢失。')) {
                // 重置表单（可选）
                document.getElementById('profileForm').reset();
            }
        });

        // 密码修改模态框
        const pwdModal = document.getElementById('pwdModal');
        document.getElementById('changePwdBtn').addEventListener('click', function() {
            pwdModal.classList.remove('hidden');
            setTimeout(() => pwdModal.classList.add('visible'), 100);
        });
        document.getElementById('closePwdModal').addEventListener('click', function() {
            pwdModal.classList.remove('visible');
            setTimeout(() => pwdModal.classList.add('hidden'), 300);
        });
        document.getElementById('pwdForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const newPwd = document.getElementById('newPwd').value;
            const confirmPwd = document.getElementById('confirmPwd').value;
            const submitBtn = this.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;

            if (newPwd !== confirmPwd) {
                alert('两次输入的密码不一致');
                return;
            }
            if (newPwd.length < 8) {
                alert('密码长度至少8位');
                return;
            }

            // 模拟提交加载
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>修改中...';
            setTimeout(() => {
                alert('密码修改成功！请重新登录');
                pwdModal.classList.remove('visible');
                setTimeout(() => {
                    pwdModal.classList.add('hidden');
                    this.reset();
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalText;
                }, 300);
            }, 1500);
        });

        // 点击模态框外部关闭
        pwdModal.addEventListener('click', function(e) {
            if (e.target === this) {
                this.classList.remove('visible');
                setTimeout(() => this.classList.add('hidden'), 300);
            }
        });

        // 绑定手机/邮箱验证按钮
        document.getElementById('bindPhoneBtn').addEventListener('click', function() {
            alert('手机绑定功能即将上线，敬请期待！');
        });
        document.getElementById('verifyEmailBtn').addEventListener('click', function() {
            alert('验证邮件已发送，请查收！');
        });

        // 用户下拉菜单
        const dropdownTrigger = document.getElementById('dropdownTrigger');
        const dropdownMenu = document.getElementById('dropdownMenu');
        const dropdownIcon = document.getElementById('dropdownIcon');
        dropdownTrigger.addEventListener('click', function() {
            dropdownMenu.classList.toggle('hidden');
            dropdownIcon.classList.toggle('rotate-180');
            if (!dropdownMenu.classList.contains('hidden')) {
                setTimeout(() => dropdownMenu.classList.add('visible'), 50);
            } else {
                dropdownMenu.classList.remove('visible');
            }
        });

        // 点击外部关闭下拉菜单
        document.addEventListener('click', function(e) {
            if (!dropdownTrigger.contains(e.target) && !dropdownMenu.contains(e.target)) {
                dropdownMenu.classList.add('hidden');
                dropdownMenu.classList.remove('visible');
                dropdownIcon.classList.remove('rotate-180');
            }
        });
    </script>
</body>
</html>